<template>
  <div>
    <div class="background"></div>

    <v-container>
      <v-row>
        <v-col id="searchHeader" cols="12" sm="12">
          <!-- <v-sheet min-height="20vh" rounded="lg"> -->
          <div class="dreamhub">探索跨学科内容</div>

          <!--        <div style="display: flex; width: 40vw; margin: auto">-->
          <!--          <v-text-field rounded background-color="white" v-model="searchInput" label="start research" single-line outlined filled v-on:keyup.enter.native="searchAns"></v-text-field>-->
          <!--          <v-btn @click="searchAns" class="mx-2" fab dark color="primary">-->
          <!--            <v-icon dark>-->
          <!--              {{ icons.mdiMagnify }}-->
          <!--            </v-icon>-->
          <!--          </v-btn>-->
          <!--        </div>-->

          <!--          <v-card style="padding-top: 20px; padding-bottom: 20px">-->
          <!--            <div style="width: 100%; margin-left: 0%; margin-top: 10px; margin-bottom: 10px">-->
          <!--              <search-card :cond-first.sync="condFirst" :cond-list.sync="condList" :advanced-search="advancedSearch" :origin="origin"></search-card>-->
          <!--            </div>-->
          <!--          </v-card>-->

          <v-tabs fixed-tabs dark class="tabs" :value="tab_search">
            <v-tab> 文献 </v-tab>
            <v-tab-item style="margin-top: 10px">
              <div style="width: 100%; margin-left: 0%; margin-top: 10px; margin-bottom: 10px">
                <search-card :cond-first.sync="condFirst" :cond-list.sync="condList" :advanced-search="advancedSearch" :origin="origin"></search-card>
              </div>
            </v-tab-item>
            <v-tab> RESEARCHERS </v-tab>
            <v-tab-item style="margin-top: 10px">
              <div style="width: 100%; margin-left: 0%; margin-top: 10px; margin-bottom: 10px">
                <researcher-card :cond-first="condFirstRe" :cond-list="condListRe" :advanced-search="advancedSearchRe"></researcher-card>
              </div>
            </v-tab-item>
          </v-tabs>

          <div style="text-align: center; font-size: large; margin-top: 20px">
            <div style="display: inline-block; transform: translateY(4%)">
              <span style="color: #02206d; font-size: 18pt; font-family: 'Times New Roman', serif; margin-right: 15px"> Trending:</span>
            </div>
            <v-chip v-for="(item, index) in keywords" :key="index" m @click="keywordSearch(item)" color="#083560" class="white--text ml-2">{{ item }}</v-chip>
          </div>

          <!-- </v-sheet> -->
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12" sm="9">
          <v-sheet min-height="70vh" rounded="lg">
            <!-- tab header -->
            <v-tabs v-model="tab" centered show-arrows style="padding-left: 5px; padding-right: 5px">
              <v-tab>
                <span>推荐</span>
              </v-tab>
              <v-tab v-for="(item, index) in domainList" :key="index">
                <span>{{ item.topic }}</span>
              </v-tab>
            </v-tabs>
            <!-- tabs -->
            <v-tabs-items v-model="tab">
              <v-tab-item>
                <PaperCard v-for="(paper, index) in recommandList" :paper="paper" :key="index"> </PaperCard>
              </v-tab-item>
              <v-tab-item v-for="(item, id) in domainList" :key="id">
                <PaperCard v-for="(paper, index) in item.paper_content.citation_list" :paper="paper" :key="index"> </PaperCard>
              </v-tab-item>
            </v-tabs-items>

            <!--  -->
          </v-sheet>
        </v-col>

        <v-col cols="12" sm="3">
          <!--        <div style="height:8vh"></div>-->
          <has-login :userId="userId" v-if="hasLogin"></has-login>
          <not-login v-else></not-login>
          <div v-for="(item, index) in news" :key="index">
            <news :newsInfo="item"></news>
          </div>
          <trend-list class="mt-6"></trend-list>
          <conf-list class="mt-6"></conf-list>
        </v-col>

        <!--      <v-col-->
        <!--        cols="12"-->
        <!--        sm="2"-->
        <!--      >-->
        <!--        <v-sheet-->
        <!--          rounded="lg"-->
        <!--          min-height="268"-->
        <!--        >-->
        <!--          &lt;!&ndash;  &ndash;&gt;-->
        <!--        </v-sheet>-->
        <!--      </v-col>-->
      </v-row>
    </v-container>
  </div>
</template>

<script>
import { mdiMagnify } from "@mdi/js";
import TrendList from "../components/index/TrendList.vue";
import ConfList from "../components/index/ConfList.vue";
import NotLogin from "../components/index/NotLogin.vue";
import HasLogin from "../components/index/HasLogin.vue";
import PaperCard from "../components/PaperCard";
import News from "../components/index/News.vue";
import authorization from "../api/authorization";
import axios from "axios";
import SearchCard from "./search/SearchCard";
import ResearcherCard from "./search/ResearcherCard";
export default {
  components: {
    TrendList,
    ConfList,
    NotLogin,
    HasLogin,
    PaperCard,
    News,
    SearchCard,
    ResearcherCard,
  },
  name: "Template",
  setup() {
    return {
      icons: {
        mdiMagnify,
      },
    };
  },
  data() {
    return {
      origin: {
        flag: false,
        gte: null,
        lte: null,
      },
      condFirst: {
        key: "标题",
        content: null,
      },
      condList: {
        list: [],
      },
      condFirstRe: {
        key: "姓名",
        content: null,
      },
      condListRe: {
        list: [],
      },
      searchStatus: {
        searchType: 0,
        offset: 0,
      },
      searchStatusRe: {
        searchType: 0,
        offset: 0,
      },
      keyword: {
        index: null,
        flag: false,
        keyword: null,
      },
      author_org: {
        index: null,
        flag: false,
        org_id: null,
      },
      res: null,
      userId: 0,
      hasLogin: false,
      avatar: null,
      username: "游客",
      identity: "User",
      scholar: "",
      isNotLogin: true,
      tab: null,
      tab_search: null,
      paperList: [],
      domainList: [],
      recommandList: [],
      searchInput: "",
      searchValue: "Edge computing",
      tabs: [{ title: "推荐" }, { title: "Computer Vision" }, { title: "Deep Learning" }],
      keywords: ["Deep Learning", "Edge Computing", "Machine Learning", "Computer Vision", "NLP"],
      recommend_data: [
        {
          id: 1,
          name: "rec1",
        },
        {
          id: 2,
          name: "rec2",
        },
        {
          id: 3,
          name: "rec3",
        },
      ],
      news: [
        {
          title: "大道至简，何恺明新论文火了",
          content: "这篇论文展示了一种被称为掩蔽自编码器（masked autoencoders，MAE）的新方法，可以用作计算机视觉的可扩展自监督学习器。",
          link: "https://www.jiqizhixin.com/articles/2021-11-13?ivk_sa=1024320u",
        },
        {
          title: "MIT、哈佛新研究：提速15000倍，借助光场实现3D场景超高速渲染",
          content: "在一篇 NeurIPS 2021 论文中，来自哈佛大学、麻省理工学院的研究人员提出了一种新方法，使从图像中表征 3D 场景比已有模型约快 15000 倍。",
          link: "https://www.jiqizhixin.com/articles/2021-12-14-7",
        },
      ],
    };
  },
  methods: {
    searchHandle() {
      var title = this.condFirst.content;
      console.log(this.condFirst);
      var flag = false;
      for (let i = 0; i < this.condList.list.length; i++) {
        if (this.condList.list[i][2]) {
          flag = true;
          break;
        }
      }
      console.log(title);
      if (!title && !flag) {
        // console.log(title);
        return;
      }
      const that = this;
      this.$api.aminerSearch.decode(this.searchStatus, this.origin, this.keyword, this.author_org, this.condFirst, this.condList).then(function (response) {
        that.res = response;
        console.log(that.res);
        let routeData = that.$router.resolve({
          path: "/searchResults",
          query: {
            str: that.res.str,
          },
        });
        window.open(routeData.href, "_blank");

        // that.$router.push({
        //   path: '/searchResults',
        //   query:{
        //     str:that.res.str,
        //   }
        // })
      });
    },

    searchHandleRe() {
      let name = this.condFirstRe.content;
      // console.log(name)
      var flag = false;
      for (let i = 0; i < this.condListRe.list.length; i++) {
        if (this.condListRe.list[i][2]) {
          flag = true;
          break;
        }
      }
      if (!name && !flag) {
        return;
      }

      const that = this;
      this.$api.aminerSearchRe.decode(this.searchStatusRe, this.condFirstRe, this.condListRe).then(function (response) {
        that.res = response;

        let routeData = that.$router.resolve({
          path: "/searchResults",
          query: {
            str: that.res.str,
          },
        });
        window.open(routeData.href, "_blank");

        // that.$router.push({
        //   path: '/searchResults',
        //   query:{
        //     str:that.res.str,
        //   }
        // })
      });
    },
    advancedSearch() {
      this.searchHandle();
    },
    advancedSearchRe() {
      this.searchHandleRe();
    },
    searchAns() {
      console.log(this.searchInput);
      this.$router.push({ name: "searchResults", params: { text: this.searchInput } });
    },
    searchTitle() {
      var title = this.searchValue;
      console.log(title);
      const that = this;
      this.$api.aminerSearch
        .get(title, false, false, 0)
        .then(function (response) {
          console.log(response);
          that.paperList = response.paperList;
        })
        .catch(function (error) {
          that.$notify.error({
            title: "出错啦",
            message: error.message,
          });
        });
    },
    keywordSearch(str) {
      this.condFirst.key = "标题";
      this.condFirst.content = str;
      this.advancedSearch();
      // this.$router.push({ name: "searchResults", params: { text: str } });
    },
    loadList(bool) {
      const that = this;
      axios.get("/api/topic/visitor/").then(function (response) {
        const data = response.data;
        console.log(data);
        that.recommandList = data.results;
      });
      if (bool) {
        axios.get("/api/topic/").then(function (response) {
          const data = response.data;
          // console.log(data);
          that.domainList = data.results;
        });
      }
    },
    getProf() {
      const that = this;
      authorization().then(function (response) {
        // console.log(response[0]);
        that.hasLogin = response[0];
        if (response[0]) {
          that.userId = response[1];
        }
        that.loadList(response[0]);
      });
    },
  },
  created() {
    this.getProf();
  },
};
</script>

<style scoped>
#searchHeader {
  /*height: 35vh;*/
  /*background: linear-gradient(to right, #30cfd0 0%, #330867 100%);*/
}
.background {
  /*z-index: -1;*/
  height: 350px;
  width: 200% !important;
  background: #083560;
  transform: translate(-20%, 0);
  position: absolute;
}
.dreamhub {
  /*background: linear-gradient(to right, #30cfd0 0%, #330867 100%);*/
  margin-bottom: 50px;
  margin-top: 50px;
  transform: translate(40%, 0);
  color: hsla(0, 0%, 100%, 0.85);
  font-size: 30pt;
}

#searchHeaderText {
  /*margin: auto;*/
  /*font-size: 60px;*/
  /*font-family: "Times New Roman";*/
  /*color: white;*/
  /*font-weight: bold;*/
}
</style>
